import router, { asyncRoutes } from '@/router'
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const whiteList = ['/login', '/404']
import getPageTitle from '@/utils/get-page-title'
router.beforeEach(async(to, from, next) => {
  // console.log(to)
  document.title = getPageTitle(to.meta.title)
  // 显示进度条
  NProgress.start()
  const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // 1.先判断有没有用户信息（在第一次访问时，用户信息已经存在 Vuex中，可以用 Vuex中取到用户信息进行判断
      // 2.没有用户信息，需要获取用户信息(权限信息)，获取到以后存在 Vuex 中
      if (!store.getters.userId) {
        // 接收后端返回的权限信息
        const menus = await store.dispatch('user/getUserInfo')
        // 3.使用【后端返回的权限信息】和【本地提前预置的动态路由】表进行对比筛选，筛选当前用户有权访问的菜单
        const filterRoutes = asyncRoutes.filter(item => {
          const routeName = item.children[0].name
          return menus.includes(routeName)
        })
        // 4.将筛选好的用户有权访问的路由动态添加到路由对象中 (addRoutes)
        // 通过 addRoutes 添加的路由是存放到内存中，不会对代码造成影响
        // 因此 addRoutes 是异步添加的，所在在刷新的时候，动态路由可能还没有添加到路由对象中，所以路由通配符 * 捕获后，展示 404
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoutes)
        store.commit('permission/setRoutes', filterRoutes)
        // 若采用的是 addRoutes 添加的动态路由，一般需要手动指定需要跳转的路径，这是 vue-router 已知的一个问题
        // 简单理解，之前没有这些动态路由，后来使用 addRoutes 进行了添加
        // 添加以后才有了这些路由，这时候就需要手动告诉路由，要跳转到新增的哪个里面去
        next({
          // 指定跳转的路径
          path: to.path
        })
      }
      // 5.直接放行 next()
      // 6.如果有用户信息，直接放行
      next()
      NProgress.done()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      // 进度条关闭 | 隐藏进度条
      NProgress.done()
    }
  }
})
router.afterEach((to, from) => {
  NProgress.done()
})
